<template>
	<div class="header-user-con">
		<!-- 全屏显示 -->
		<div class="btn-fullscreen" @click="handleFullScreen">
			<el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom">
				<i class="el-icon-rank"></i>
			</el-tooltip>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				fullscreen: '取消全屏'
			}
		},
		methods: {
			// 全屏事件
			handleFullScreen() {
				// 此处可根据获取节点进行区域全屏事件
				let element = document.documentElement;
				if (this.fullscreen) {
					if (document.exitFullscreen) {
						document.exitFullscreen();
					} else if (document.webkitCancelFullScreen) {
						document.webkitCancelFullScreen();
					} else if (document.mozCancelFullScreen) {
						document.mozCancelFullScreen();
					} else if (document.msExitFullscreen) {
						document.msExitFullscreen();
					}
				} else {
					if (element.requestFullscreen) {
						element.requestFullscreen();
					} else if (element.webkitRequestFullScreen) {
						element.webkitRequestFullScreen();
					} else if (element.mozRequestFullScreen) {
						element.mozRequestFullScreen();
					} else if (element.msRequestFullscreen) {
						// IE11
						element.msRequestFullscreen();
					}
				}
				this.fullscreen = !this.fullscreen;
			}
		}
	}
</script>

<style>
</style>
